<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>背不出元素周期表</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body,
			html {
				overflow: hidden;
				height: 100%;
				width: 100%;
				/* float: left; */
			}

			.header {
				position: absolute;
				background-color: rgb(243, 240, 242);
				width: 89px;
				height: 40px;
				border: 1px black solid;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.header_3 {
				position: absolute;
				background-color: rgb(243, 240, 242);
				width: 270px;
				height: 40px;
				border: 1px black solid;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			#container {
				/* margin: 10px; */
				flex-direction: column-reverse;
				position: relative;
				height: 100%;
				display: flex;
				/* margin:auto; */
				/* margin: 0 auto; */
			}


			.headers,
			.elements {
				display: flex;
			}

			.element {
				position: absolute;
				top: 40px;
				background-color: rgb(182, 227, 169);
				width: 89px;
				height: 120px;
				border: 1px black solid;
				display: flex;
				align-items: center;
				font-size: 40px;
				justify-content: center;
			}

			.iron {
				background-color: rgb(111, 205, 69);
			}

			#inp {
				height: 100px;
				/* margin: 10px; */
				font-size: 5rem;
				text-align: center;
				border: none;
				border-bottom: 1px black solid;
			}

			#btn {
				height: 100px;
				/* margin: 10px; */
				/* padding: 10px; */
				font-size: 2.5rem;
			}

			#scoreshow {
				height: 50px;
				/* padding: 10px; */
				font-size: 2.5rem;
			}

			#timeshow {
				width: 100px;
				height: 100px;
				font-size: 5em;
				position: absolute;
				left: 50%;
				top: 65%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div class="headers">
				<div class="header" style="">I A</div>
				<div class="header" style="">II A</div>
				<div class="header" style="">III B</div>
				<div class="header" style="">IV B</div>
				<div class="header" style="">V B</div>
				<div class="header" style="">VI B</div>
				<div class="header" style="">VII B</div>
				<div class="header" style="width: 270px;">VIII</div>
				<div class="header" style="">I B</div>
				<div class="header" style="">II B</div>
				<div class="header" style="">III A</div>
				<div class="header" style="">IV A</div>
				<div class="header" style="">V A</div>
				<div class="header" style="">VI A</div>
				<div class="header" style="">VIIA</div>
				<div class="header" style="">0</div>
			</div>
			<div class="elements">
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
				<div class="element"></div>
			</div>
			<span id="scoreshow">score:0</span>
			<input type="text" id="inp" />
			<input type="button" id="btn" value="确认" />
		</div>
		<span id="timeshow" class="center">time:0s</span>
		<script>
			const chemistry = ['H', 'He',
				'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne',
				'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar',
				'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe', 'Co', 'Ni', 'Cu', 'Zn', 'Ga', 'Ge', 'As', 'Se', 'Br', 'Kr'
			]
			console.log(chemistry.length);
			const headers = document.getElementsByClassName("headers")[0].children;
			const elements = document.getElementsByClassName("elements")[0].children;
			const container = document.getElementById("container");
			let sum = 90;
			for (var i = 1; i < headers.length; i++) {
				headers[i].style.left = sum + "px";
				sum += (headers[i].style.width != '') ? 270 : 90;
			}
			headers[1].style.top = 120 + 'px';
			headers[0].style.top = 0 + 'px';
			headers[15].style.top = 0 + 'px';
			for (var i = 2; i < headers.length; i++) {
				if (i <= 9) {
					headers[i].style.top = 360 + 'px';
				} else if (i < headers.length - 1) {
					headers[i].style.top = 120 + 'px';
				}
			}

			for (var i = 0; i < elements.length; i++) {
				// elements[i].innerHTML = chemistry[i];
				if (i == 1) {
					elements[i].style.left = 90 * 17 + 'px'
				} else if (2 <= i && i <= 3) {
					elements[i].style.top = 120 + 40 + 'px'
					elements[i].style.left = 90 * (i - 2) + 'px'
				} else if (4 <= i && i <= 9) {
					elements[i].style.top = 120 + 40 + 'px'
					elements[i].style.left = 90 * (i + 8) + 'px'
				} else if (10 <= i && i <= 11) {
					elements[i].style.top = 240 + 40 + 'px'
					elements[i].style.left = 90 * (i - 10) + 'px'
				} else if (12 <= i && i <= 17) {
					elements[i].style.top = 240 + 40 + 'px'
					elements[i].style.left = 90 * (i) + 'px'
				} else if (18 <= i && i <= 35) {
					elements[i].style.top = 360 + 40 + 'px'
					elements[i].style.left = 90 * (i - 18) + 'px'
				}
			}

			/* main */
			const inp = document.getElementById('inp')
			const btn = document.getElementById('btn')
			const scoreshow = document.getElementById('scoreshow')
			const timeshow = document.getElementById('timeshow')

			function getRandom(min, max) {
				return Math.floor(Math.random() * (max + 1 - min) + min);
			}
			let index = 0;
			let score = 0;
			// 生成0-35的随机序列
			let a = []
			for (var i = 0; i < 36; i++) {
				a.push(i);
			}
			let randomList = [];
			for (var i = 0; i < 36; i++) {
				var num = getRandom(0, a.length - 1);
				randomList.push(a[num]);
				a.splice(num, 1);
			}
			for (var i = 0; i < randomList.length; i++) {
				console.log(chemistry[randomList[i]]);
			}
			// console.log(randomList);

			// function main() {
			// 	for (var i = 0; i < elements.length; i++) {
			// 		elements[i].style.background = '';
			// 	}
			// 	index = getRandom(0, 35);
			// 	elements[index].style.background = 'red';
			// }
			elements[randomList[index]].style.background = 'red';
			btn.onclick = function() {
				var val = inp.value;
				inp.value = '';
				if (val.toUpperCase() == chemistry[randomList[index]].toUpperCase()) {
					score++;
					scoreshow.innerText = 'score:' + score;
					const dom = elements[randomList[index]]
					dom.style.background = '';
					dom.innerHTML = chemistry[randomList[index]];
					if (index == 35) {
						// 结束
						dom.innerHTML = chemistry[randomList[index]];
						elements[randomList[index]].style.background = '';
						endTime = new Date();
						alert("You win!\n Time cost: " + ((endTime - startTime) / 1000).toFixed(2) + "s")
						location.reload()
					}
					index++;
					elements[randomList[index]].style.background = 'red';
				} else {
					alert("wrong");
				}
			}
			let startTime = 0;
			let endTime = 0;
			let isStarted = false;
			inp.onkeydown = function() {
				if (!isStarted) {
					// 开始
					timeCount = setInterval(function() {
						var now = new Date();
						timeshow.innerText = 'time:' + ((now - startTime) / 1000).toFixed(2) + 's';
					}, 10)
					isStarted = !isStarted;
					startTime = new Date();
				}
			}

			let timeCount
			//  ------       监听回车事件        -----------------//
			document.onkeydown = keyDownSearch;

			function keyDownSearch(e) { //回车函数  
				// 兼容FF和IE和Opera    
				var theEvent = e || window.event;
				var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
				if (code == 13 && document.activeElement == inp) {
					btn.onclick();
					return false;
				}
				return true;
			}
		</script>
	</body>

</html>
